import React, { Component } from 'react';
import {Grid, List}  from 'antd-mobile';
import PropTypes from 'prop-types';

class AvatarSelector extends Component {
  static propType = {
    selectAvatar: PropTypes.func.isRequired
  }
  constructor(props){
    super(props)
    this.state={

    };
  }
  render() {
    const avatarList = 'zebra,boy,bull,chick,crab,girl,hedgehog,hippopotamus,koala,lemur,man,pig,tiger,whale,woman'
                        .split(',').map(v=>({
                          icon:require(`./img/${v}.png`),
                          text:v
                        }));
    const gridHeader = this.state.icon ? 
                              (<div>
                                <span>已选择头像</span>
                                <img style={{width:20}} src={this.state.icon} alt=""/>
                              </div>)
                              : '请选择头像'
    return (
      <div>
          <List renderHeader={()=>gridHeader}>

            <Grid data={avatarList} activeStyle={false} columnNum={5} 
              onClick={elm => {
                this.setState(elm)
                this.props.selectAvatar(elm.text)
              }}/>
          </List>

      </div>
    );
  }
}

export default AvatarSelector;